<template>
  <router-link :to="`/details/${goods.id}`" class="good_item">
    <div
      class="img"
      @mouseover="hoveredItem = goods.id"
      @mouseleave="hoveredItem = null"
    >
      <img
        v-img-lazy="goods.picture"
        :class="{ hovered: hoveredItem === goods.id }"
        alt=""
      />
    </div>
    <div class="detail">
      <div class="name">{{ truncateText(goods.name, 10) }}</div>
      <p class="desc">{{ truncateText(goods.desc || '', 12) }}</p>
      <p class="price">{{ goods.price }}元</p>
    </div>
  </router-link>
</template>

<script setup>
import { truncateText } from '@/utils/truncateText';
import { ref } from 'vue';

const hoveredItem = ref(null); // 用于跟踪当前悬停的项目
defineProps({
  goods: {
    type: Object,
    default: () => ({
      id: '',
      picture: '',
      name: '',
      desc: '',
      price: 0,
    }),
  },
});
</script>

<style lang="scss" scoped>
.good_item {
  .img {
    text-align: center;
    width: 250px;
    height: 250px;
    transition: transform 0.2s; /* 添加过渡效果 */
    margin: 10px 40px;

    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      object-fit: cover; 
      transition: transform 0.2s; /* 添加过渡效果 */
    }

    /* 当 hoveredItem 匹配时，应用抬起效果 */
    img.hovered {
      transform: translateY(-5px); /* 向上抬起5px */
    }
  }

  .detail {
    margin-top: 10px;
    width: 350px;
    height: fit-content;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .name {
      text-align: center;
      padding-top: 10px;
      font-size: 20px;
    }
    .desc {
      text-align: center;
      padding-top: 10px;
      font-size: 15px;
    }
    .price {
      text-align: center;
      padding-top: 10px;
      font-size: 22px;
      color: red;
    }
  }
}
</style>